<template lang="html">
  <div id="filterBar" :class="{showChoice: showChoice}" @touchmove.stop="" @click.stop.prevent="showChoice = false;active = ''">
    <ul class="filter-list">
      <li
        class="filter-item"
        @click.stop="filterClick"
        data-type="QY"
        :class="{active: active === 'QY', width33: !showArea}"
        v-if="showArea">
        <span :class="{spanActive: selectQY}">{{selectQY || '区域'}}</span><i></i>
      </li>

      <li
        class="filter-item"
        @click.stop="filterClick"
        data-type="ZJ"
        :class="{active: active === 'ZJ', width33: !showArea}">
        <span :class="{spanActive: selectZJ}">{{selectZJ || '租金'}}</span><i></i>
      </li>

      <li
      class="filter-item"
      @click.stop="filterClick"
      data-type="LX"
      :class="{active: active === 'LX', width33: !showArea}">
        <span :class="{spanActive: selectLX.length > 0}">{{selectLX.length === 0 ? '类型' : (selectLX.length ===1 ? selectLX[0] : '多选')}}</span><i></i>
      </li>

      <li
      class="filter-item"
      @click.stop="filterClick"
      data-type="SX"
      :class="{active: active === 'SX', width33: !showArea}">
        <span :class="{spanActive: selectSX.length > 0}">{{selectSX.length === 0 ? '筛选' : (selectSX.length ===1 ? selectSX[0] : '多选')}}</span><i></i>
      </li>
    </ul>
    <div class="filter-condition" v-if="showChoice" @click.stop.prevent="">
      <!-- 区域筛选条件 -->
      <div class="area-conditions" v-show="active === 'QY'">
        <!-- <p class="condition-title" v-if="regions.length > 0">区域</p> -->
        <ul class="condition-box">
          <li class="condition-item width-23" :class="{active: region === condition.code}" v-for="condition in regions" :key="condition.id" @click="selectCondition('QY', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 租金筛选条件 -->
      <div class="rental-conditions" v-show="active === 'ZJ'">
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: rentalPrice === condition.code}" v-for="condition in rentalPrices" :key="condition.id" @click="selectCondition('ZJ', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 类型筛选条件 -->
      <div class="type-conditions row-conditions" v-show="active === 'LX'">
        <ul class="left">
          <li :class="{active: lxTab === 'HXS'}" @click="lxTab = 'HXS'"><span>卧室</span></li>
          <li :class="{active: lxTab === 'HXW'}" @click="lxTab = 'HXW'"><span>卫生间</span></li>
        </ul>
        <!-- <p class="condition-title" v-if="layoutRooms.length > 0">卧室</p> -->
        <ul class="right" v-show="lxTab === 'HXS'">
          <li class="condition-item width-44" :class="{active: layoutRoom === condition.code}" v-for="(condition, index) in layoutRooms" :key="index" @click="selectCondition('HXS', condition)">{{condition.value}}</li>
        </ul>
        <!-- <p class="condition-title" v-if="layoutToilets.length > 0">卫生间</p> -->
        <ul class="right" v-show="lxTab === 'HXW'">
          <li class="condition-item width-44" :class="{active: layoutToilet === condition.code}" v-for="(condition, index) in layoutToilets" :key="index" @click="selectCondition('HXW', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 筛选条件 -->
      <div class="filtrate-conditions row-conditions height-30" v-show="active === 'SX'">
        <ul class="left">
          <li :class="{active: sxTab === 'YJ'}" @click="sxTab='YJ'"><span>押金</span></li>
          <li :class="{active: sxTab === 'CX'}" @click="sxTab='CX'"><span>朝向</span></li>
          <li :class="{active: sxTab === 'JZMJ'}" @click="sxTab='JZMJ'"><span>建筑面积</span></li>
          <li :class="{active: sxTab === 'LD'}" @click="sxTab='LD'"><span>标签</span></li>
          <li :class="{active: sxTab === 'LC'}" @click="sxTab='LC'"><span>楼层</span></li>
          <li :class="{active: sxTab === 'ZX'}" @click="sxTab='ZX'"><span>装修</span></li>
          <!-- <li :class="{active: sxTab === 'DT'}" @click="sxTab='DT'"><span>电梯</span></li> -->
        </ul>
        <!-- 押金 -->
        <ul class="right" v-show="sxTab === 'YJ'">
          <li class="condition-item width-44" :class="{active: pledge === condition.code}" v-for="(condition, index) in pledges" :key="index" @click="selectCondition('YJ', condition)">{{condition.value}}</li>
        </ul>
        <!-- 朝向 -->
        <ul class="right" v-show="sxTab === 'CX'">
          <li class="condition-item width-44" :class="{active: direct === condition.code}" v-for="(condition, index) in directs" :key="index" @click="selectCondition('CX', condition)">{{condition.value}}</li>
        </ul>
        <!-- 建筑面积 -->
        <ul class="right" v-show="sxTab === 'JZMJ'">
          <li class="condition-item width-44" :class="{active: area === condition.code}" v-for="(condition, index) in areas" :key="index" @click="selectCondition('JZMJ', condition)">{{condition.value}}</li>
        </ul>
        <!-- 标签 -->
        <ul class="right" v-show="sxTab === 'LD'">
          <li class="condition-item width-44" :class="{active: highlightCodes.indexOf(condition.code) >= 0}" v-for="(condition, index) in highlights" :key="index" @click="selectCondition('LD', condition)">{{condition.value}}</li>
        </ul>
        <!-- 楼层 -->
        <ul class="right" v-show="sxTab === 'LC'">
          <li class="condition-item width-44" :class="{active: floor === condition.code}" v-for="(condition, index) in floors" :key="index" @click="selectCondition('LC', condition)">{{condition.value}}</li>
        </ul>
        <!-- 装修 -->
        <ul class="right" v-show="sxTab === 'ZX'">
          <li class="condition-item width-44" :class="{active: decoration === condition.code}" v-for="(condition, index) in decorations" :key="index" @click="selectCondition('ZX', condition)">{{condition.value}}</li>
        </ul>
        <!-- 电梯 -->
        <!-- <ul class="right" v-show="sxTab === 'DT'">
          <li class="condition-item width-44" :class="{active: isLift === condition.code}" v-for="(condition, index) in lifts" :key="index" @click="selectCondition('DT', condition)">{{condition.value}}</li>
        </ul> -->
        <!-- <p class="condition-title" v-if="directs.length > 0">朝向</p>
        <ul class="condition-box">
          <li class="condition-item width-23" :class="{active: direct === condition.code}" v-for="(condition, index) in directs" :key="index" @click="selectCondition('CX', condition)">{{condition.value}}</li>
        </ul>
        <p class="condition-title" v-if="areas.length > 0">建筑面积</p>
        <ul class="condition-box">
          <li class="condition-item width-23" :class="{active: area === condition.code}" v-for="(condition, index) in areas" :key="index" @click="selectCondition('JZMJ', condition)">{{condition.value}}</li>
        </ul>
        <p class="condition-title" v-if="highlights.length > 0">标签</p>
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: highlightCodes.indexOf(condition.code) >= 0}" v-for="(condition, index) in highlights" :key="index" @click="selectCondition('LD', condition)">{{condition.value}}</li>
        </ul>
        <p class="condition-title" v-if="floors.length > 0">楼层</p>
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: floor === condition.code}" v-for="(condition, index) in floors" :key="index" @click="selectCondition('LC', condition)">{{condition.value}}</li>
        </ul>
        <p class="condition-title" v-if="decorations.length > 0">装修</p>
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: decoration === condition.code}" v-for="(condition, index) in decorations" :key="index" @click="selectCondition('ZX', condition)">{{condition.value}}</li>
        </ul>
        <p class="condition-title" v-if="lifts.length > 0">电梯</p>
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: isLift === condition.code}" v-for="(condition, index) in lifts" :key="index" @click="selectCondition('DT', condition)">{{condition.value}}</li>
        </ul> -->
      </div>
    </div>

    <div class="btns" v-if="showChoice">
      <p class="btn-clear" @click.stop="clearCondition"><span>清理筛选</span></p>
      <p class="btn-sure" @click="submitCondition"><span>确 定</span></p>
    </div>
  </div>

</template>

<script>
export default {
  watch: {
    showChoice (val) {
      if (val) {
        this.scrollTop = document.body.scrollTop
        document.body.className = 'disable-scroll'
        document.body.style.top = `-${this.scrollTop}px`
      } else {
        document.body.className = ''
        document.body.scrollTop = this.scrollTop
      }
    }
  },
  props: {
    showArea: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      scrollTop: 0, // 滚动的位置
      showChoice: false, // 显示筛选条件
      active: '', // 当前激活的筛选条件
      sxTab: 'YJ', // 筛选激活tab
      lxTab: 'HXS', // 类型激活tab

      // 存放于 session 的值
      YJValue: '', // 选中的押金
      QYValue: '', // 选中的区域
      ZJValue: '', // 选中的租金
      HXSValue: '', // 选中的卧室
      HXWValue: '', // 选中的卫生间
      CXValue: '', // 选中的朝向
      JZMJValue: '', // 选中的建筑面积
      LDValue: [], // 选中的标签
      LCValue: '', // 选中的楼层
      ZXValue: '', // 选中的装修
      // DTValue: '', // 选中的电梯

      // 用于显示在 FilterBar 的 title
      selectQY: '', // 选中的区域
      selectZJ: '', // 选中的租金
      selectLX: [], // 选中的类型
      selectSX: [], // 选中的筛选

      // 筛选条件
      pledges: [], // 押金筛选条件
      regions: [], // 区域筛选条件
      rentalPrices: [], // 租金筛选条件
      layoutRooms: [], // 卧室筛选条件
      layoutToilets: [], // 卫生间筛选条件
      directs: [],  // 朝向筛选条件
      areas: [], // 面积筛选条件
      highlights: [], // 标签筛选条件
      floors: [], // 楼层筛选条件
      decorations: [], // 装修筛选条件
      lifts: [], // 电梯筛选条件

      // 选中的 code
      isFreebet: '', // 未选中诚信免押
      betNum: '', // 押金方式（'1'-押一, '2'-押二, '3'-押三）
      pledge: '', // 押金
      region: '', // 选中的地区
      area: '', // 选中的建筑面积
      rentalPrice: '', // 选中的租金
      layoutRoom: '', // 选中的卧室
      layoutToilet: '', // 选中的卫生间
      direct: '', // 选中的朝向
      highlightCodes: [], // 选中的亮点
      floor: '', // 选中的楼层
      decoration: '', // 选中的装修
      isLift: '' // 有无电梯
    }
  },
  beforeUpdate () {
    window.localStorage.removeItem('QY')
  },
  methods: {
    // 获取筛选条件
    getData (codeType) {
      var data = []
      if (localStorage.getItem(codeType)) {
        data = JSON.parse(localStorage.getItem(codeType))
        this.setData(codeType, data)
      } else {
        this.$axiosPosting(this.$api.getHouseAttributeByCodeType, { codeType }).then(res => {
          if (res.code === '0000') {
            data = res.data
            this.setData(codeType, data)
            // localStorage.setItem(codeType, JSON.stringify(res.data))
          }
        })
      }
    },
    // 筛选条件赋值至data中
    setData (codeType, data) {
      switch (codeType) {
        case 'QY':
          this.regions = data
          break
        case 'ZJ':
          this.rentalPrices = data
          break
        case 'HXS':
          this.layoutRooms = data
          break
        case 'HXW':
          this.layoutToilets = data
          break
        case 'CX':
          this.directs = data
          break
        case 'LD':
          this.highlights = data
          break
        case 'JZMJ':
          this.areas = data
          break
        case 'LC':
          this.floors = data
          break
        case 'ZX':
          this.decorations = data
          break
        case 'DT':
          this.lifts = data
          break
        case 'YJ':
          this.pledges = [
            // {
            //   code: '0',
            //   value: '诚信免押'
            // },
            {
              code: '1',
              value: '押一'
            },
            {
              code: '2',
              value: '押二'
            },
            {
              code: '3',
              value: '押三'
            }
          ]
          break
      }
      this.showChoice = true
    },
    filterClick (e) {
      if (this.active === e.currentTarget.getAttribute('data-type')) {
        this.showChoice = false
        this.active = ''
      } else {
        this.active = e.currentTarget.getAttribute('data-type')
        if (this.active !== 'SX' && this.active !== 'LX') {
          this.getData(this.active)
        } else if (this.active === 'LX') {
          this.getData('HXS')
          this.getData('HXW')
        } else if (this.active === 'SX') {
          this.setData('YJ')
          this.getData('CX')
          this.getData('LD')
          this.getData('JZMJ')
          this.getData('LC')
          this.getData('ZX')
          this.getData('DT')
        }
      }
    },
    // 选择筛选条件
    selectCondition (type, condition) {
      switch (type) {
        case 'YJ':
          this.pledge = condition.code === this.pledge ? '' : condition.code
          this.YJValue = condition.code === this.YJValue ? '' : condition.value
          if (condition.code === '0') {
            this.isFreebet = '1'
            this.betNum = ''
          } else {
            this.isFreebet = ''
            this.betNum = condition.code
          }
          break
        case 'QY':
          this.region = condition.code === this.region ? '' : condition.code
          this.QYValue = condition.value === this.QYValue ? '' : condition.value
          break
        case 'ZJ':
          this.rentalPrice = condition.code === this.rentalPrice ? '' : condition.code
          this.ZJValue = condition.value === this.ZJValue ? '' : condition.value
          break
        case 'HXS':
          this.layoutRoom = condition.code === this.layoutRoom ? '' : condition.code
          this.HXSValue = condition.value === this.HXSValue ? '' : condition.value
          break
        case 'HXW':
          this.layoutToilet = condition.code === this.layoutToilet ? '' : condition.code
          this.HXWValue = condition.value === this.HXWValue ? '' : condition.value
          break
        case 'CX':
          this.direct = condition.code === this.direct ? '' : condition.code
          this.CXValue = condition.value === this.CXValue ? '' : condition.value
          break
        case 'JZMJ':
          this.area = condition.code === this.area ? '' : condition.code
          this.JZMJValue = condition.value === this.JZMJValue ? '' : condition.value
          break
        case 'LD':
          // 标签最多选3个
          let index = this.highlightCodes.indexOf(condition.code)
          if (index < 0) {
            // 添加标签
            if (this.highlightCodes.length >= 3) {
              this.$vux.toast.text('标签最多选择3个')
            } else {
              this.highlightCodes.push(condition.code)
              this.LDValue.push(condition.value)
            }
          } else {
            // 删除标签
            this.highlightCodes.splice(index, 1)
            this.LDValue.splice(index, 1)
          }
          break
        case 'LC':
          this.floor = condition.code === this.floor ? '' : condition.code
          this.LCValue = condition.value === this.LCValue ? '' : condition.value
          break
        case 'ZX':
          this.decoration = condition.code === this.decoration ? '' : condition.code
          this.ZXValue = condition.value === this.ZXValue ? '' : condition.value
          break
        // case 'DT':
        //   this.isLift = condition.code === this.isLift ? '' : condition.code
        //   this.DTValue = condition.value === this.DTValue ? '' : condition.value
        //   break
      }
    },
    // 清理筛选
    clearCondition () {
      switch (this.active) {
        case 'QY':
          this.region = ''
          this.QYValue = ''
          break
        case 'ZJ':
          this.rentalPrice = ''
          this.ZJValue = ''
          break
        case 'LX':
          switch (this.lxTab) {
            case 'HXS':
              this.layoutRoom = ''
              this.HXSValue = ''
              break
            case 'HXW':
              this.layoutToilet = ''
              this.HXWValue = ''
              break
          }
          break
        case 'SX':
          switch (this.sxTab) {
            case 'CX':
              this.direct = ''
              this.CXValue = ''
              break
            case 'JZMJ':
              this.area = ''
              this.JZMJValue = ''
              break
            case 'LD':
              this.highlightCodes = []
              this.LDValue = []
              break
            case 'LC':
              this.floor = ''
              this.LCValue = ''
              break
            case 'ZX':
              this.decoration = ''
              this.ZXValue = ''
              break
            case 'YJ':
              this.isFreebet = ''
              this.betNum = ''
              this.pledge = ''
              this.YJValue = ''
              break
            // case 'DT':
            //   this.isLift = ''
            //   this.DTValue = ''
            //   break
          }
          break
      }
    },
    submitCondition () {
      let LXArr1 = this.HXSValue ? [this.HXSValue] : []
      let LXArr2 = this.HXWValue ? [this.HXWValue] : []

      let SXArr1 = this.CXValue ? [this.CXValue] : []
      let SXArr2 = this.JZMJValue ? [this.JZMJValue] : []
      let SXArr3 = this.LDValue
      let SZArr4 = this.LCValue ? [this.LCValue] : []
      let SZArr5 = this.ZXValue ? [this.ZXValue] : []
      let SZArr6 = this.YJValue ? [this.YJValue] : []

      this.selectQY = this.QYValue
      this.selectZJ = this.ZJValue
      this.selectLX = LXArr1.concat(LXArr2)
      this.selectSX = SXArr1.concat(SXArr2, SXArr3, SZArr4, SZArr5, SZArr6)

      let data = {
        isFreebet: this.isFreebet, // 是否免押
        betNum: this.betNum, // 押金方式
        region: this.region, // 区域
        layoutRoom: this.layoutRoom, // 房间
        layoutToilet: this.layoutToilet, // 卫生间
        area: this.area, // 面积
        rentalPrice: this.rentalPrice, // 租金
        direct: this.direct, // 朝向
        highlights: this.highlightCodes.join(','), // 亮点
        floor: this.floor, // 楼层
        decoration: this.decoration, // 装修
        isLift: this.isLift // 电梯
      }
      if (!this.showArea) {
        delete data.region
      }
      let sessionData = {
        isFreebet: this.isFreebet, // 是否免押
        betNum: this.betNum, // 押金方式
        pledge: this.pledge, // 押金
        region: this.region, // 区域
        regionValue: this.selectQY, // 选中的区域值
        layoutRoom: this.layoutRoom, // 房间
        layoutToilet: this.layoutToilet, // 卫生间
        area: this.area, // 面积
        rentalPrice: this.rentalPrice, // 租金
        rentalPriceValue: this.selectZJ, // 选中的租金值
        typeValue: this.selectLX, // 选中的类型
        filterValue: this.selectSX, // 选中的筛选
        direct: this.direct, // 朝向
        highlights: this.highlightCodes.join(','), // 亮点
        floor: this.floor, // 楼层
        decoration: this.decoration, // 装修
        isLift: this.isLift, // 电梯
        YJValue: this.YJValue,
        HXSValue: this.HXSValue,
        HXWValue: this.HXWValue,
        CXValue: this.CXValue,
        JZMJValue: this.JZMJValue,
        LDValue: this.LDValue,
        LCValue: this.LCValue,
        ZXValue: this.ZXValue
      }
      window.localStorage.setItem('filterData', JSON.stringify(sessionData))
      this.showChoice = false
      this.$emit('filterSubmit', data)
    }
  },
  created () {
    let filterData = JSON.parse(window.localStorage.getItem('filterData') || '{}')
    this.selectQY = this.QYValue = filterData.regionValue || ''
    this.selectZJ = this.ZJValue = filterData.rentalPriceValue || ''
    this.selectLX = filterData.typeValue || ''
    this.selectSX = filterData.filterValue || ''

    this.YJValue = filterData.YJValue || ''
    this.HXSValue = filterData.HXSValue || ''
    this.HXWValue = filterData.HXWValue || ''
    this.CXValue = filterData.CXValue || ''
    this.JZMJValue = filterData.JZMJValue || ''
    this.LDValue = filterData.LDValue || []
    this.LCValue = filterData.LCValue || ''
    this.ZXValue = filterData.ZXValue || ''

    this.isFreebet = filterData.isFreebet || '' // 是否免押
    this.betNum = filterData.betNum || '' // 押金方式
    this.pledge = filterData.pledge || ''
    this.region = filterData.region || ''
    this.area = filterData.area || ''
    this.rentalPrice = filterData.rentalPrice || ''
    this.layoutRoom = filterData.layoutRoom || ''
    this.layoutToilet = filterData.layoutToilet || ''
    this.direct = filterData.direct || ''
    this.highlightCodes = filterData.highlights ? filterData.highlights.split(',') : []
    this.floor = filterData.floor || ''
    this.decoration = filterData.decoration || ''
    this.isLift = filterData.isLift || ''
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/baseVar.less";
  .filter-wrap.showChoice{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  #filterBar{
    margin-left: -1px;
    ul, li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .filter-list{
      display: flex;
      justify-content: space-between;
      line-height: 55px;
      width: 100%;
      height: 55px; /* 60/40 */
      .filter-item{
        display: flex;
        flex: 1;
        max-width: 25%;
        padding: 0 10px;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: 14px; /* 28/40 */
        color: #343434;
        box-sizing: border-box;
        &.width33{
          max-width: 33%;
        }
        &::before{
          content: '';
          width: 1px;
          height: 15px;
          position: absolute;
          background: #f4f4f4;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        span{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .spanActive{
          color: #ff9600;
        }
        i{
          display: block;
          margin-left: 5px;
          width: 0;
          height: 0;
          border: 4px solid transparent;
          border-top-color: #bbb;
          border-bottom: 0;
        }
        &:first-of-type{
          &::before{
            display: none;
          }
        }
      }
    }
    &.showChoice{
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      min-height: 100vh;
      background: rgba(0, 0, 0, .7);
      z-index: 100;
      .filter-list{
        background: #fff;
        box-sizing: border-box;
        // height: 40px;
        // line-height: 40px;
        .filter-item.active{
          color: #ff9600;
          i{
            border-top-color: #ff9600;
          }
        }
      }
      .filter-condition{
        padding: 17px 15px 0;
        max-height: 50vh;
        border-top: 1px solid #f4f4f4;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        box-sizing: border-box;
        .condition-title{
          font-size: 10px;
          text-align: center;
          margin-bottom: 7px;
          color: @color-999999;
        }
        .condition-box{
          display: flex;
          flex-wrap: wrap;
          .condition-item{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            margin: 0 10px 10px 0;
            font-size: 12px;
            color: #585858;
            border: 1px solid #e9e9e9;
            border-radius: 3px;
            box-sizing: border-box;
            &.width-23{
              width: 23.5%;
              margin-right: 2%;
              &:nth-child(4n){
                margin-right: 0;
              }
            }
            &.width-32{
              width: 32%;
              margin-right: 2%;
              &:nth-child(3n) {
                margin-right: 0
              }
            }
            // height: 25px;
            // text-align: center;
            // line-height: 25px;
            // font-size: 12px;
            // border-radius: 3px;
            // border: 1px solid @border-color;
            // color: #666;
            // background: #fff;
            // margin-right: 5px;
            // margin-bottom: 7px;
            // transition: all .2s;
            // box-sizing: border-box;
            &.active{
              color: #ff9600;
              border-color: #ff9600;
            }
          }
        }
        .row-conditions{
          width: 100%;
          display: flex;
          &.height-30{
            height: 30vh;
          }
          .left{
            width: 118px;
            height: 100%;
            margin-left: -15px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            font-size: 12px;
            color: 000;
            text-align: center;
            border-right: 1px solid #f4f4f4;
            li{
              position: relative;
              padding: 20px 0;
              &+li:after{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                display: block;
                width: 30px;
                height: 1px;
                background: #e5e5e5;
              }
            }
            span{
              position: relative;
              display: inline-block;
              padding-right: 13px;
              &:after{
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                display: block;
                width: 0;
                height: 0;
                border: 4px solid transparent;
                border-top-color: #bbb;
                border-bottom: 0;
              }
            }
            li.active{
              color: #ff9600;
              span:after{
                border: 4px solid transparent;
                border-left-color: #ff9600;
                border-right: 0;
              }
            }
          }
          .right{
            display: flex;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-left: 15px;
            margin-left: -10px;
            flex-wrap: wrap;
            flex: 1;
            align-content: flex-start;
            box-sizing: border-box;
            .condition-item{
              display: flex;
              align-items: center;
              justify-content: center;
              height: 34px;
              font-size: 12px;
              color: #585858;
              border: 1px solid #e9e9e9;
              border-radius: 3px;
              box-sizing: border-box;
              margin: 0 0 10px 10px;
              &.active{
                color: #ff9600;
                border-color: #ff9600;
              }
            }
            .width-44{
              width: 44%;
            }
          }
        }
      }
      .btns{
        padding: 20px 14px 24px;
        display: flex;
        height: 45px;
        font-size: 16px;
        background: #fff;
        .btn-clear{
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          border: 1px solid #ff9600;
          border-radius: 3px;
          margin-right: 10px;
          color: #ff9600;
        }
        .btn-sure{
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          border-radius: 3px;
          color: #fff;
          background: #ff9600;
        }
      }
    }
  }
</style>
